Vue.js events

2022-04-21
javascript vue3.0

v-on 的缩写为 @，其参数为 event即监听对应的事件是否被触发，这主要用法就是绑定事件监听器，事件的类型都由修饰符进行指定。也可监听鼠标、键盘等事件来运行相应的 JavaScript，如 v-on:click="methodName" 或 @click="methodName"：

@click

<ui id="app">
    <button @click="counts +=1">Add 1</button>
    <button @click="counts -=1">Remove 1</button>
    <p>This is {{counts}}</p>
</ui>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                counts: 0
            }
        }
    })
    const vm = app.mount('#app')
</script>

@click function

为应对更加复杂的业务环境，v-on 还提供调用 function 的支持，这会让 @click 的功能的监听更加的多样化。

<ui id="app">
    <button @click="add">Add</button>
</ui>
<script>
    const app = Vue.createApp ({
        data() {
            return {
                counts: 'Hey,v-on'
            }
        },
        methods: {
            add(event) {
                alert('This is ' + this.counts)
                if (event) {
                    alert('v-on:' + event.target.tagName)
                }
            }
        }
    })
    const vm = app.mount('#app')
</script>

内链处理方法

鼠标左击处理也是通过内链直接调用的，所谓内链就是与html 标签元素写在一起即大多数都被称之为内链。

Vue 使用的是 $ 前缀来通过组件实例所暴露自己的内置 API，对于内部还提供了 _ 前缀。

<ui id="app">
    <button @click="echo('hey,world!',$event)">Add</button>
</ui>
<script>
    const app = Vue.createApp ({
        data() {
            return {
            }
        },
        methods: {
            echo(message, event) {
                alert(message)
                if (event) {
                    alert('v-on:' + event.target.tagName)
                }
            }
        }
    })
    const vm = app.mount('#app')
</script>

修饰符

Name	Info	Full
click.stop	调用 `event.stopPropagation()`	阻止捕获和冒泡阶段中当前事件的进一步传播
click.prevent	调用 `event.preventDefault()`	阻止默认的点击事件执行
.capture	添加事件侦听器时使用capture(捕获) 模式
.self	只当事件从侦听器绑定元素本身触发时才进行回调
```.{keyCode	keyAlias}```	只当事件从特定键触发时才进行回调
.once	只触发一次回调
.left	只当点击鼠标左键时触发
.right	只当鼠标点击右键时触发
.middle	当鼠标中键时触发
.passive	以 { passive: true } 模式添加侦听器

事件的修饰符处理通常是调用 event.stoppPropagation() 方法来进行实现的，但只有纯粹的数据逻辑而不是处理 DOM 事件，因此 Vue v-on 指令提供了修饰符。

我们主要以 prevent 为例，监听其 submit 元素是否被触发，并组织默认的单击事件执行：

<div id="app">
    <form v-on:click.prevent="doThis">
        <a :href="home">{{message}}</a>
    </form>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Go Jiangxue Team',
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

或者通过 v-on 的简写 @ 来实现没有表达式的阻止默认行为：

<div id="app">
    <form @click.prevent>
        <a :href="home">{{message}}</a>
    </form>
</div>
<script>
    var App = {
        data() {
            return {
                message: 'Go Jiangxue Team',
                home: 'https://www.jiangxue.team/'
            }
        }
    }
    Vue.createApp(App).mount("#app")
</script>

可参考下 Vue 官方文档中所提供的实例：

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<form @submit.prevent></form>	/ <form @click.prevent></form>

<!-- 阻止默认行为，没有表达式 -->
<form @click.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

@click

众所周知，Jquery 很多方法都需要使用鼠标事件，如鼠标单击事件，而vue 在2.2.0版本中，也增加了一个鼠标按钮修饰符，还比 Jq 的更加简单便捷：

Name	Img
.left
.right
.middle

例如可以监听鼠标的 right事件来返回一个消息，当然你也可以监听 .middle 滚轮中键点击等：

<ui id="app">
    <button @click.right="echo('hey,world!',$event)">Add</button>
</ui>
<script>
    const app = Vue.createApp ({
        data() {
            return {
            }
        },
        methods: {
            echo(message, event) {
                alert(message)
                if (event) {
                    alert('v-on:' + event.target.tagName)
                }
            }
        }
    })
    const vm = app.mount('#app')
</script>

@keyup

v-on 指令并不仅仅支持鼠标的事件操作，还支持按键，这在官方文档中也被称之为按键修饰符，通过监听键盘事件，在v-on指令中共支持了 9 个按键修饰符：

Name	Img
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

通过 Vue 的按键修饰符可以监听目前常用的按键事件来执行对应的操作，例如监听 tab 按键从而返回消息：

<ui id="app">
    <button @keyup.tab="echo('hey,world!',$event)">Add</button>
</ui>
<script>
    const app = Vue.createApp ({
        data() {
            return {
            }
        },
        methods: {
            echo(message, event) {
                alert(message)
                if (event) {
                    alert('v-on:' + event.target.tagName)
                }
            }
        }
    })
    const vm = app.mount('#app')
</script>

系统修饰符

当然，vue的v-on指令还不仅仅以上这些，自然而然的还支持了系统修饰符，我们可以通过按下响应的按键触发监听器：

ID	DA
.ctrl
.alt
.shift
.meta

Vue 对几个系统按键提供了多个支持，以及多个按键(@keyup)或鼠标(@click)之间的组合监听，需要注意的是在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

比如下述的实例中，通过 ctrl 和 @click 按键，当按下 ctrl 并点击该事件才会进行触发 echo 事件，或者通过 ctrl + enter 组合进行触发。

需要注意的是，修饰符键于常规的不同，当keyup事件一起使用的时候，修饰符键必须处于按下的状态，只有当按住tab的情况下释放其他案件，才能被触发，所以如果需要实现那种行为，可以尝试下使用 KeyCodes

<ui id="app">
    <button @click.ctrl="echo('hey,world!',$event)">A</button>
    <input @keyup.ctrl.enter="echo('hey,world!',$event)" />
</ui>
<script>
    const app = Vue.createApp ({
        data() {
            return {
            }
        },
        methods: {
            echo(message, event) {
                alert(message)
                if (event) {
                    alert('v-on:' + event.target.tagName)
                }
            }
        }
    })
    const vm = app.mount('#app')
</script>

为了增强修饰符之间的组合使用，在 Vue 2.5.0 中还提供了 .exact 属性用于精准控制系统修饰符组合并合并触发事件：

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>

⬅️ Go back